<template>
  <div>
    <van-nav-bar title="评论" fixed left-arrow @click-left="$router.back()" />
    <div class="main">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <van-cell v-for="obj in list" :key="obj.id">
          <template>
            <div class="wrap">
              <div class="img_wrap">
                <img :src="obj.user.avatarUrl" alt="" />
              </div>
              <div class="content_wrap">
                <div class="header_wrap">
                  <div class="info_wrap">
                    <p>{{ obj.user.nickname }}</p>
                    <p>{{ obj.time }}</p>
                  </div>
                  <div>{{ obj.lakedCount }}点赞</div>
                </div>
                <div class="footer_wrap">{{ obj.content }}</div>
              </div>
            </div>
          </template>
        </van-cell>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import { getCommentListApi } from "@/api";
export default {
  data() {
    return {
      list: [],
      isLoading: false,
    };
  },
  methods: {
    onRefresh() {
      // 先清空 再去获取数据
      this.list = [];
      this.getList();
    },
    // 封装请求
    getList() {
      getCommentListApi({
        limit: 20,
        id: this.$route.query.id,
      }).then((res) => {
        console.log(res);
        this.list = res.data.comments;
        this.isLoading = false;
      });
    },
  },
  created() {
    this.getList();
  },
};
</script>

<style scoped>
.main {
  padding-top: 46px;
}
/* 容器样式 */
.wrap {
  display: flex;
}
.img_wrap {
  width: 0.8rem;
  height: 0.8rem;
  margin-right: 0.266667rem;
}
.img_wrap img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.content_wrap {
  flex: 1;
}
/* 右侧头部 */
.header_wrap {
  display: flex;
}
.info_wrap {
  flex: 1;
}
.info_wrap p:first-child {
  font-size: 0.3733rem;
  color: #666;
}
.info_wrap p:last-of-type {
  color: #999;
  font-size: 0.24rem;
}
.header_wrap div:last-of-type {
  color: #999;
  font-size: 0.293333rem;
}
/* 评论内容 */
.footer_wrap {
  font-size: 0.4rem;
  color: #333;
}
</style>